<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    /*
    第一步
    主线程: [console.log(1), console.log(4), console.log(10)]
    宏任务: [callback1, callback3]
    微任务: [callback2]

    打印: 1  4  10


    第二步 主线程执行完毕 先将微任务队列执行完毕
    主线程: [console.log(1), console.log(4), console.log(10), console.log(5),console.log(6),console.log(7)]
    宏任务: [callback1, callback3,callback6]
    微任务: [callback2,callback4,callback5]   // => callback2  callback4, callback5

    打印: 1  4  10  5  6  7


    第三步 微任务执行完毕 取出宏队列中位于队首的任务，放入主线程中执行
    主线程: [console.log(1), console.log(4), console.log(10), console.log(5),console.log(6),console.log(7), console.log(2)]
    宏任务: [callback1, callback3,callback6]  // =>callback1,
    微任务: [callback7]

    打印: 1  4  10  5  6  7  2


    第四步 本次宏队列执行完毕 将微任务队列的所有任务都执行完毕
    主线程:  [console.log(1), console.log(4), console.log(10), console.log(5),console.log(6),console.log(7), console.log(2),onsole.log(3)]
    宏任务: [callback3,callback6]
    微任务: [callback7]  // => callback7

    // 打印:  1  4  10  5  6  7  2  3

    第五步  微任务执行完毕 取出宏队列中位于队首的任务，放入主线程中执行
    主线程:  [console.log(1), console.log(4), console.log(10), console.log(5),console.log(6),console.log(7), console.log(2),onsole.log(3),console.log(9)]
    宏任务: [callback3,callback6]  // => callback3
    微任务: []

    // 打印:  1  4  10  5  6  7  2  3  9

    第五步   没有微任务执行完毕 继续取出宏队列中位于队首的任务，放入主线程中执行
    主线程:  [console.log(1), console.log(4), console.log(10), console.log(5),console.log(6),console.log(7), console.log(2),onsole.log(3),console.log(9),console.log(8)]
    宏任务: [callback6]  // => callback6
    微任务: []

    // 打印:  1  4  10  5  6  7  2  3  9 8




 */
</script>
<script>

    console.log(1);
    setTimeout(() => {  //callback1

        console.log(2);
        Promise.resolve().then(() => {  //callback7

            console.log(3)
        });
    });

    new Promise((resolve, reject) => {

        console.log(4)
        resolve(5)
    }).then((data) => {  // callback2

        console.log(data);

        Promise.resolve().then(() => {  // callback4

            console.log(6)
        }).then(() => {      // callback5

            console.log(7)

            setTimeout(() => {   // callback6

                console.log(8)
            }, 0);
        });
    })

    setTimeout(() => {  // callback3

        console.log(9);
    })

    console.log(10);

</script>

</html>